<template>
  <ga-drawer
    width="50%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    @closed="handleCancel"
  >
    <template #title> {{ title }} </template>
    <div>
      You can customize modal body text by the current situation. This modal
      will be closed immediately once you press the OK button.
    </div>
  </ga-drawer>
</template>

<script setup>
import { ref } from "vue";

const visible = ref(false);
const title = ref("");
const open = (val) => {
  visible.value = true;
  title.value = val?.name;
};
// 提交方法
const handleOk = () => {
    visible.value = false;
}
// 取消方法
const handleCancel = () => {
    visible.value = false;
}
defineExpose({ open });
</script>

<style lang="scss" scoped></style>
